<script lang="ts" setup>
import { reactive, ref } from "vue";
import va from "@/rules/index";
import type {
    FormInstance,
    FormRules,
} from "element-plus";


const emits = defineEmits(["refreshDataList"]);
const props =
    defineProps({
        fields: {
            type: Array,
            default: () => {
                return [];
            },
        },
        downTmp: {
            type: String,
            default: "",
        },
    });
const formRef = ref<FormInstance>();


const checkAll = ref(false)
const isIndeterminate = ref(false)
const formData = ref<{
    [key: string]: any;
}>({
    fields: [],
    range: 1,
    fileType: 'excel',
    nameType: 0,
    fileName: ''
});
const fieldsList: any[] = props.fields.map((i: any) => ({
    key: i.prop,
    label: i.label,
}))

//引入自定义验证规则
const formRules = reactive<FormRules>({
    range: [va.required()],
    fields: [va.required()],
    fileType: [va.required()],
    nameType: [va.required()],
    fileName: [va.required()],
});
// reactive 数据双向绑定
const saveLoading: any = ref(false);
const formDialog: any = reactive<{
    top: string;
    width: string;
    type: string;
    title: string;
    span: number;
    visible: boolean;
}>({
    top: "10vh",
    width: "960px",
    type: "export",
    title: "导出",
    span: 24,
    visible: false,
});


const show = async (type: any, _data: any = {}) => {
    formDialog.type = type;
    if (type == "export") {
        formDialog.title = "导出";
        formDialog.visible = true;
    }
};

const saveForm = async (formEl: FormInstance | undefined) => {
    saveLoading.value = true;
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('表单内容')
            console.log(formData.value)
        } else {
            console.log("error submit!", fields);
        }
        saveLoading.value = false;
    });
};
// 全选
const handleCheckAllChange = (val: boolean) => {
    formData.value.fields = val ? fieldsList.map(i => i.key) : []
    isIndeterminate.value = false
}
// 设置半选状态
const handleCheckedCitiesChange = (value: string[]) => {
    const checkedCount = value.length
    checkAll.value = checkedCount === fieldsList.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < fieldsList.length
}

defineExpose({ show });
</script>

<template>
    <el-tooltip effect="dark" content="导出数据" placement="top">
        <el-button type="primary" icon="Download" plain @click="show('export', {})"></el-button>
    </el-tooltip>
    <el-dialog :title="formDialog.title" v-model="formDialog.visible" :top="formDialog.top" :width="formDialog.width"
        :close-on-click-modal="false" :append-to-body="true">
        <el-form :model="formData" :rules="formRules" ref="formRef" label-width="90px" label-suffix=":"
            label-position="top">
            <el-row :gutter="20">
                <el-col :span="formDialog.span">
                    <el-form-item label="数据范围" prop="range">
                        <el-radio-group v-model="formData.range">
                            <el-radio :value="1">当前页数据</el-radio>
                            <el-radio :value="2">当前过滤数据</el-radio>
                            <el-radio :value="3">所有数据</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24 || formDialog.span">
                    <el-form-item label="字段选择" prop="fields">
                        <div class="w-full">
                            <!-- <el-transfer v-model="formData.fields" :data="fieldsList" /> -->

                            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate"
                                @change="handleCheckAllChange">
                                全选 <span class="text-gray-600">(<span class="text-red-600">{{ formData.fields.length
                                        }}</span>/<span>{{ fieldsList.length
                                        }}</span>)</span>
                            </el-checkbox>
                            <el-checkbox-group v-model="formData.fields" @change="handleCheckedCitiesChange">
                                <el-row :gutter="20">
                                    <el-col :span="8" v-for="i in fieldsList" :key="i.key">
                                        <el-checkbox :label="i.label" :value="i.key" />
                                    </el-col>
                                </el-row>
                            </el-checkbox-group>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="formDialog.span">
                    <el-form-item label="导出格式" prop="fileType">
                        <el-radio-group v-model="formData.fileType">
                            <el-radio value="excel">Excel</el-radio>
                            <el-radio value="json">Json</el-radio>
                            <el-radio value="xml">Xml</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="formDialog.span">
                    <el-form-item label="文件名" prop="nameType">
                        <el-radio-group v-model="formData.nameType">
                            <el-radio :value="0">系统生成</el-radio>
                            <el-radio :value="1">自定义</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24 || formDialog.span" v-if="formData.nameType === 1">
                    <el-form-item label="" prop="fileName">
                        <el-input v-model="formData.fileName" maxlength="100" placeholder="文件名"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="saveForm(formRef)" icon="Download" :loading="saveLoading"
                    auto-insert-space>导出</el-button>
                <el-button @click="formDialog.visible = false" icon="CircleClose" auto-insert-space>取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
